<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>湖北楚游通年卡平台</title>
    <meta name="description" content="年卡自助机">

    <!-- CSS and other pretties -->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/site.css">
    <link rel="stylesheet" href="css/unslider.css">
    <!--http://www.bootcss.com/p/buttons/-->
    <!--<link rel="stylesheet" href="css/buttons.css">-->

    <script src="js/jquery-2.1.4.js"></script>
    <script src="js/unslider-min.js"></script>
    <script src="slider-data.js"></script>
    <script>
        var slider;
        $(document).ready(function ($) {
            var slider_content = '';
            for (var index in sliders) {
                var img = sliders[index];
                slider_content += '<li><img src="img/' + img.src + '" alt="' + img.alt + '"></li>';
            }

            $('.fading-slider ul').html(slider_content);
            slider = $('.fading-slider').unslider({
                animation: 'fade',
                autoplay: false,
                arrows: true
            });
        });

        function showNext() {
            slider.unslider('next');
        }
    </script>
</head>

<body onselectstart="return false">
<div id="demos">
    <div class="wrap">
        <div class="demo">
            <div class="fading-slider">
                <ul>
                    <li><img src="img/wh.jpg" alt="大武汉旅游年卡"></li>
                    <li><img src="img/hg.jpg" alt="黄冈旅游年卡"></li>
                    <li><img src="img/hs.jpg" alt="黄石旅游年卡"></li>
                    <li><img src="img/sc.jpg" alt="四城旅游年卡"></li>
                </ul>
            </div>
            <p style="text-align:center">
                <button id="startBtn" href="#" onclick="app.showMainForm();"></button>
            </p>
        </div>
    </div>
</div>
</body>
</html>